// SPDX-License-Identifier: MIT

@use "sass:color";
@use "color-scale" as scale;
@use "utils";

$fg-default:           scale.$base-9 !default;
$fg-muted:             scale.$base-6 !default;
$fg-subtle:            scale.$base-5 !default;
$fg-onEmphasis:        scale.$light  !default;

$canvas-default:       scale.$light  !default;
$canvas-overlay:       scale.$light  !default;
$canvas-inset:         scale.$base-0 !default;
$canvas-subtle:        scale.$base-0 !default;

$border-default:       scale.$base-2 !default;
$border-muted:         lighten(scale.$base-2, 0.03) !default;
$border-subtle:        utils.flattenColor(scale.$light, color.change(scale.$dark, $alpha: 0.15)) !default;
$shadow-default:       scale.$base-2 !default;

// neutral is used by the .split-menu-button,
// note that you should maintain some contrast between neutral and canvas.subtle
$neutral-emphasisPlus: scale.$base-9 !default;
$neutral-emphasis:     scale.$base-5 !default;
$neutral-muted:        color.change(scale.$base-3, $alpha: 0.2) !default;
$neutral-subtle:       color.change(scale.$base-1, $alpha: 0.5) !default;

$accent-fg:            scale.$accent-5 !default;
$accent-emphasis:      scale.$accent-5 !default;
$accent-muted:         color.change(scale.$accent-3, $alpha: 0.4) !default;
$accent-subtle:        scale.$accent-0 !default;

$success-fg:           scale.$success-5 !default;
$success-emphasis:     scale.$success-4 !default;
$success-muted:        color.change(scale.$success-3, $alpha: 0.4) !default;
$success-subtle:       scale.$success-0 !default;

$warning-fg:           scale.$warning-5 !default;
$warning-emphasis:     scale.$warning-4 !default;
$warning-muted:        color.change(scale.$warning-3, $alpha: 0.4) !default;
$warning-subtle:       scale.$warning-0 !default;

$danger-fg:            scale.$danger-5 !default;
$danger-emphasis:      scale.$danger-5 !default;
$danger-muted:         color.change(scale.$danger-3, $alpha: 0.4) !default;
$danger-subtle:        scale.$danger-0 !default;

$chart-1: #f3622d !default;
$chart-2: #fba71b !default;
$chart-3: #57b757 !default;
$chart-4: #41a9c9 !default;
$chart-5: #4258c9 !default;
$chart-6: #9a42c8 !default;
$chart-7: #c84164 !default;
$chart-8: #888888 !default;

$chart-1-alpha70: color.change($chart-1, $alpha: 0.7) !default;
$chart-2-alpha70: color.change($chart-2, $alpha: 0.7) !default;
$chart-3-alpha70: color.change($chart-3, $alpha: 0.7) !default;
$chart-4-alpha70: color.change($chart-4, $alpha: 0.7) !default;
$chart-5-alpha70: color.change($chart-5, $alpha: 0.7) !default;
$chart-6-alpha70: color.change($chart-6, $alpha: 0.7) !default;
$chart-7-alpha70: color.change($chart-7, $alpha: 0.7) !default;
$chart-8-alpha70: color.change($chart-8, $alpha: 0.7) !default;

$chart-1-alpha20: color.change($chart-1, $alpha: 0.2) !default;
$chart-2-alpha20: color.change($chart-2, $alpha: 0.2) !default;
$chart-3-alpha20: color.change($chart-3, $alpha: 0.2) !default;
$chart-4-alpha20: color.change($chart-4, $alpha: 0.2) !default;
$chart-5-alpha20: color.change($chart-5, $alpha: 0.2) !default;
$chart-6-alpha20: color.change($chart-6, $alpha: 0.2) !default;
$chart-7-alpha20: color.change($chart-7, $alpha: 0.2) !default;
$chart-8-alpha20: color.change($chart-8, $alpha: 0.2) !default;
